<template>
	<view class="container">
		<tui-list-view class="tui-list-view">
			<!-- <tui-list-cell @click="gerenXinxi" class="tui-list">
				<tui-icon name="people-fill" color="#fcd6d2"></tui-icon>
				<view class="tui-list-cell-name">新的朋友</view>
			</tui-list-cell> -->
			<tui-list-cell @click="toGroups" class="tui-list">
				<tui-icon name="people-fill" color="#fcd6d2"></tui-icon>
				<view class="tui-list-cell-name">群聊</view>
			</tui-list-cell>
			<!-- -->
			<tui-list-cell @click="toUsers" class="tui-list">
				<tui-icon name="link" color="#fcd6d2"></tui-icon>
				<view class="tui-list-cell-name">好友列表</view>
			</tui-list-cell>
			<tui-list-cell @click="toFriends()" class="tui-list">
				<tui-icon name="wealth-fill" color="#ff7900"></tui-icon>
				<view class="tui-list-cell-name">寻找恐友</view>
				<tui-tag size="small" type="light-orange" shape="circle" class="tui-right">按标签搜索</tui-tag>
			</tui-list-cell>
		</tui-list-view>
	</view>
</template>

<script>
	import tuiListView from "@/components/tui/list-view"
	import tuiListCell from "@/components/tui/list-cell"
	import tuiIcon from "@/components/tui/icon"
	import tuiTag from "@/components/tui/tag"
	import tuiBadge from "@/components/tui/badge"
	export default {
		components: {
			tuiListView,
			tuiListCell,
			tuiIcon,
			tuiTag,
			tuiBadge
		},
		data() {
			return {
				
			}
		},
		onLoad(){
			// #ifndef H5
			uni.showShareMenu({
				showShareItems : ['qq', 'qzone', 'wechatFriends', 'wechatMoment']	
			});
			// #endif
		},
		methods: {
			toGroups(){
				uni.navigateTo({
					url: '../groups/groups'
				})
			},
			toFriends() {
				uni.navigateTo({
					url: 'friends'
				})
			},
			toUsers(){
				uni.navigateTo({
					url: 'users'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}


	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}

	.tui-list::after {
		left: 94upx !important
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}

	.logo {
		height: 40upx;
		width: 40upx;
	}

	.tui-flex {
		display: flex;
		align-items: center;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		display: block;
		margin-right: 24upx;
	}

	.tui-msg-item {
		max-width: 500upx;
		min-height: 80upx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34upx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26upx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}

	.tui-badge {
		width: auto
	}

	.tui-msg::after {
		left: 154upx !important
	}
</style>
